<template>
  <div class="msgInfo">
  	<text-header :title="'消息提醒'" :bgcolor="'rgba(255,255,255,1)'" :color="'#808080'" :topath="'/index'" class="textHeader"></text-header>
  	<div class="msgList">
  		<div class="listItem" v-for="item,i in messageList" :key="i" @click="friendDetail(item)">
  			<div class="timeWrap">
  				<span class="timecon">{{item.createDate}}</span>
  			</div>
  			<div class="msgItem">
  				<yd-flexbox class="msg-main">
		            <div class="itemTitle">
		            	<span :class="{'yadu-icon-xiaoxi1':item.messageType=='0','yadu-icon-lingdang':item.messageType=='2'||item.messageType=='3','yadu-icon-tuijian':item.messageType=='1'}"></span><span class="titleText">{{item.messageType=='0'?'好友申请':item.messageType=='1'?'饮水提醒':'系统提醒'}}</span>
		            </div>
		            <yd-flexbox-item class="msg-con">{{item.messageContent}}<span class="delBtn" v-if="item.messageType=='0'" @click.stop="recive(item.id)">接受</span></yd-flexbox-item>
		        </yd-flexbox>
  			</div>
  		</div>
  	</div>
  </div>
</template>

<script>
import textHeader from "../components/TextHeader";
import URL from "@/until/urlConfig.js"
import until from "@/until/until"
export default {
  name: 'msgInfo',
  components: {
  	textHeader
  },
  data(){
  	return{
  		messageList:[]
  	}
  },
  created(){
  	this.getMessage();
  },
  methods:{
  	getMessage(){
  		this.$http.get(URL.getMessage)
  		.then( res => {
  			this.messageList = res.data;
  		})
  	},
  	recive(id){
  		until.$http.post(URL.addFriend,{messageId:id})
  		.then(res=>{
  			this.$dialog.toast({
	            mes: '处理成功',
	            timeout: 1500
	        });
  		})
  		this.getMessage();
  	},
  	friendDetail(item){
  		if(item.messageType=='0'){
  			this.$router.push({path:'/friendinfo',query:{id:item.id}})
  		}else{
  			return;
  		}
  	}
  }
}
</script>
<style lang="scss">
@import "../style/public.scss";
.msgInfo{
	height:100%;
	background:#f1f1f1;
	.textHeader{
		color:#000;
	}
	.msgList{
		height:calc(100% - 0.96rem);
		overflow:auto;
		padding:0 rem(20) rem(40);
		.listItem{
			.timeWrap{
				padding:rem(16) 0;
				.timecon{
					color:#fff;
					padding:rem(2) rem(16);
					border-radius:rem(6);
					background:#dedede;
				}
			}
			.msgItem{
				border-radius:rem(8);
				background:#fff;
				.msg-main{
					padding:rem(20);
					align-items:flex-start;
					.itemTitle{
						padding-right:rem(20);
						height:rem(36);
						border-right:rem(2) solid #ededed;
						line-height:rem(36);
						span{
							font-size:rem(22);
							color:#808080;
							&.yadu-icon-xiaoxi1{
								color:$defaultcolor;
								font-size:rem(26);
								margin-right:rem(8);
							}
							&.yadu-icon-lingdang{
								color:#db321c;
								font-size:rem(26);
								margin-right:rem(8);
							}
							&.yadu-icon-tuijian{
								color:#e8964e;
								font-size:rem(26);
								margin-right:rem(8);
							}
						}
					}
					.msg-con{
						margin-left:rem(20);
						text-align:left;
						line-height:rem(36);
						font-size:rem(26);
						color:#808080;
						.delBtn{
							float:right;
							width:rem(86);
							height:rem(36);
							line-height:rem(36);
							border-radius:rem(18);
							background:$defaultcolor;
							color:#fff;
							text-align:center;
							font-size:rem(22);
						}
					}
				}
			}
		}
	}
}
</style>